<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    // function selectImage(){
    //   //得到图片的对象
    //   var imgObj = document.getElementById("faceImg");
    //   //得到下拉框的对象
    //   var selectObj = document.getElementById("imgSelect");
    //   //selectObj.value表示得到下拉框选中option选项的value值
    //   // alert(selectObj.value);
    //   //比较字符串是否相等，采用==
    //   if(selectObj.value == "春香"){
    //     imgObj.src = "img/6.jpg";
    //   }
    //   else if(selectObj.value =="夏香"){
    //     imgObj.src = "img/7.jpg";
    //   }
    //   else if(selectObj.value =="秋香"){
    //     imgObj.src = "img/8.jpg";
    //   }
    //   else if(selectObj.value =="冬香"){
    //     imgObj.src = "img/9.jpg";
    //   }
    // }

    function selectImage(selectObj){
      document.getElementById("faceImg").src = selectObj.value;
    }
  </script>
</head>
<body>
    <img src="img/6.jpg" id="faceImg" width="300" height="300"><br>
    <!--onchange当下拉框选项变化时触发-->
    <select onchange="selectImage(this)" id="imgSelect">
      <option value="img/6.jpg">春香</option>
      <option value="img/7.jpg">夏香</option>
      <option value="img/8.jpg">秋香</option>
      <option value="img/9.jpg">冬香</option>
    </select>
</body>
</html>
